<template>
  <div>
    <el-dialog v-model="dialogVisible" title="支付链接" width="30%" :before-close="handleClose">
      <div class="flex flex-direction justify-content align-center">
        <div>
          <div class="payment-link-modal__link-container">
            <div class="payment-link-modal__link flex">
              <div class="payment-link-modal__link-value one_text_hidden">{{ data.invitePayUrl }}</div>

              <button class="payment-link-modal__link-copy" @click="copyPaymentLink" title="Copy link">
                <i class="fas fa-copy"></i>
              </button>
            </div>
          </div>

          <div class="margin-top">
            <el-image :src="data.qrcodeUrl" style="width: 240px;"></el-image>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>

          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const data = ref({
  invitePayUrl: "https://jlhome.yulecheng.icu/checkout?orderNo=NO82-563720379-20250604203952",
  qrcodeUrl: "http://jlapiv.yulecheng.icu//static/qrcode/NO82-563720379-20250604203952.png"
})

const open = (record) => {
  data.value = record.data

  dialogVisible.value = true
}

// 复制支付链接
const copyPaymentLink = () => {
  navigator.clipboard
    .writeText(data.value.invitePayUrl)
    .then(() => {
      ElMessage({
        type: 'success',
        message: '链接已复制到剪贴板'
      })
    })
    .catch((err) => {
      console.error('无法复制链接:', err)
      ElMessage({
        type: 'success',
        message: '复制失败，请手动复制链接'
      })
    })
}

defineExpose({
  open
})
</script>

<style lang='scss' scoped>
.payment-link-modal__link-value {
  width: 400px;
}
</style>
